<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
			#box{
				width: 1340px;
				height: 510px;
				background: url(img/QQ截图20160910182542.png) no-repeat;
			}
			#xbox{
				height: 40px;
				width: 140px;
				background: #c92f06;
				position: absolute;
				left: 182px;
				top: 328px;
				border: 2px solid whitesmoke;
				border-radius: 3px;
				text-align: center;
				line-height: 40px;
				color: white;
				font-family: "微软雅黑";
				font-weight: bold;
				cursor: pointer;
				font-size: 16px;
			}
			#xxbox{
				width: 100%;
				height: 100%;
				display: none;
			}
			#zz{
				width: 100%;
				height: 100%;
				background: white;
				opacity: 0.5;
			}
			#dd{
				width: 621px;
				height: 328px;
				position: relative;
				position: fixed;
				left: 400px;
				top: 160px;
			}
			#sp a{
				text-decoration: none;
				color: black;
				font-size: 25px;
				position: absolute;
				top: 0;
				right:3PX;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="xbox">
				登录个人中心
			</div>
			<div id="xxbox">
				
			<div id="zz">
				
			</div>
			<div id="dd">
				<img src="img/QQ拼音截图未命1.png" />
				<span id="sp"><a href="#">X</a></span>
			</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	document.getElementById("xbox").onclick=function(){
		document.getElementById("xxbox").style.display="block";
	}
	document.getElementById("sp").onclick=function(){
		document.getElementById("xxbox").style.display="none";
	}
</script>
